<style scoped>
  .content .w980{
    padding-top: 0;
  }
  .nav-path{
    position: relative;
  }
  .nav-path ol{
    width: 100%;
    height: 36px;
  }
  .nav-path button.add-hsp-btn{
    position: absolute;
    top: 0;
    right: 0;
  }
  .nav-path ol li a{
    color: #444;
  }
  .nav-path ol li:last-child{
    color: #00CB8F;
  }
  button{
  	outline: none!important;
  }
  .breadcrumb{
  	margin-bottom: 0;
  	position: relative;
  }
  .modal-header .close{
  	margin: 0;
  	position: absolute;
    width: 16px;
    height: 16px;
    right: 10px;
    top: 10px;
    text-align: center;
    line-height: 16px;
  }
  /*机构列表*/
  .list-tips{
    padding: 0;
    height: 36px;
    line-height: 36px;
    background: #F5F5F4  url(../../assets/img/list_tips.png) no-repeat 20px center;
    background-size: 4px 20px;
  }
  .list-tips span{
    float: left;
    font-size: 16px;
    height: 36px;
    line-height: 36px;
    margin-left: 36px;
    text-align: left;
  }

	/*医院列表*/
	.form-group.limitManage{
		margin-bottom: 40px;
		margin-top: 20px;
		min-height: 580px;
	}
	.form-group.limitManage label,.form-group.limitManage aside{
		float: left;
	}
	.form-group.limitManage aside{
		border: 1px solid #E6E5E2;
	}
	.form-group.limitManage aside .hospital-list{
		height: 646px;
		overflow: auto;
		overflow-x: hidden;
	}
	.form-group.limitManage aside.limit-hospital{
		width: 25%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		margin-left: 13px;
		margin-right: 32px;
	}
	.form-group.limitManage aside.limit-hospital .hospital-list ul li a{
		display: block;
		width: 100%;
		height: 30px;
		line-height: 30px;
		color: #666;
		font-size: 14px;
		text-indent: 20px;
		overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.form-group.limitManage aside.limit-hospital .hospital-list ul li a:hover{
		color: #f00;
		text-decoration: none;
		background-color: #85D0F1;
	}
	.form-group.limitManage aside.limit-hospital-detail{
		width: 70%;
		min-height: 580px;
	}
	.form-group.limitManage aside.limit-hospital-detail .hp-list-detail th,.form-group.limitManage aside.limit-hospital-detail .hp-list-detail td{
		padding:15px 5px;
	}
	.form-group.limitManage .limit-title{
		padding: 0;
		height: 37px;
		line-height: 37px;
		background: #F8F8F7  url(../../assets/img/list_tips.png) no-repeat 20px center;
		background-size: 4px 20px;
	}
	.form-group.limitManage .limit-title span{
		float: left;
		font-size: 16px;
		height: 37px;
		line-height: 37px;
		margin-left: 34px;
	}
	table tbody{
		border-bottom: 1px solid #ddd;
	}
	table tr th,table tr td{
		text-align: center;
		vertical-align: middle!important;
	}
	.list-content table tr:nth-child(odd){
		background-color: #fff;
	}
	.list-content table tr:nth-child(even){
		background-color: #F6FBF8;
	}
	.table>thead>tr>th{
		border: 0;
		font-weight: 400;
	}
	table tr td span.glyphicon{
		display: inline-block;
		width: 42px;
		height: 16px;
		font-size: 12px;
		text-align: right;
		margin-right: 5px;
		cursor: pointer;
		background-repeat: no-repeat!important;
		background-position: left center!important;
	}
	table tr td span:first-child{
		background: url(../../assets/img/watch.png) no-repeat left center;
		background-size: 17px 12px;
	}
	table tr td span:last-child{
		background: url(../../assets/img/dele4.png) no-repeat left center;
		background-size: 14px;
	}
	.exp-mark{
		color: red;
		height: 100%;
		line-height: 100%;
		font-size: 14px;
		margin-right: 5px;
		display: inline-block;
	}

	.list-opera .form-control{
		width: 150px;
	}


	/*选择医生*/
	a#select-doctor-btn{
		display: block;
	    color: #fff;
	    text-align: center;
	    width: 106px;
	    height: 36px;
	    line-height: 36px;
	    border: 0;
	    margin-right: 20px;
	    border-radius: 10px;
	    background-color: #00C782;
	}
	/*查询--搜索*/
	.list-opera .form-inline label{
		margin: 0 10px 0 23px;
		font-size: 14px;
		color: #666460;
		font-weight: 400;
		height: 34px;
		line-height: 34px;
	}
	.list-opera .form-inline button{
		width: 98px;
		height: 32px;
		display: inline-block;
		outline: none;
		color: #fff;
	}
	.list-opera{
		margin: 26px 0;
	}
	.list-opera .form-inline .clear-research{
		float: right;
		margin-right: 40px;
		height: 32px;
	}
	.list-opera .form-inline button.res-btn{
		margin-left: 18px;
	}

	div.save-btn-parent button:first-child{
		margin-left: 30%;
	}

	/*添加医生职业信息*/
	.increase-doctors{
		margin-top: 20px;
	}
	/*新增医生*/
	.new-add-doctor{
		height: 500px;
    	overflow: auto;
	}
	.new-add-doctor .form-group{
		display: block;
		margin: 10px 0;
	}
	.new-add-doctor .form-group label{
		width: 12%;
		text-align: right;
	}
	.new-add-doctor .form-group input,.new-add-doctor .form-group select,.new-add-doctor .form-group textarea{
		width: 28%;
	}
		/*新增医生图像组件*/
	.new-add-doctor .form-group .img-title{
		vertical-align: top;
	}
	.new-add-doctor .form-group .img-component{
		display: inline-block;
		position: relative;
		width: 80%;
	}
	.new-add-doctor .form-group .img-component .suggsetion-exp{
		position: relative;
		top: 10px;
	}
		/*新增医生保存返回*/
	.new-add-doctor .form-group.save-btn-parent{
		margin-bottom: 30px;
	}
	.new-add-doctor .form-group.save-btn-parent button:first-child{
		margin-left: 14%;
	}

	/*删除提示*/
	#delCoverTips .modal-dialog .modal-content{
		width: 75%;
		margin: 0 auto;
	}
	.del-tips{
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 20px;
	}
	.del-tips span{
		color: #f00;
		padding: 0 3px;
	}
	.modal-footer .btn{
		width: 100px;
		margin-right: 20px;
		outline: none;
	}
	.modal-footer .btn.btn-primary{
		background-color: #00C782;
	}

	/*span-error*/
    span.error{
        color: #f00;
        display: block;
        width: 100%;
        padding-left: 14%;
        background: none;
        margin-bottom: 0;
        line-height: 30px;
        border: 0;
    }
	.exp-mark{
		color: red;
		height: 100%;
		line-height: 100%;
		font-size: 14px;
		margin-right: 8px;
		display: inline-block;
	}

	/*查询--新增医生*/
	button.ok.search_newadd{
		color: #fff;
		border-radius: 16px;
		width: 80px;
	}

	/*右键*/
	div#rMenu {
	    position: absolute;
	    visibility: hidden;
	    top: 0;
	    background-color: #fafafa;
	    text-align: left;
	    padding: 2px;
	    border: 1px solid #e6e6e6;
	    padding: 5px
	}

	div#rMenu ul{
	    margin-bottom: 0;
	}

	div#rMenu ul li {
	    margin: 1px 0;
	    padding: 5px 10px;
	    cursor: pointer;
	    list-style: none outside none;
	}

	div#rMenu ul li:nth-child(1) {
	    background: url(../../assets/img/add2.png) no-repeat 10px center;
	    padding-left: 35px;
	    cursor: pointer;
	    border-bottom: 1px solid #1DC499;
	}

	div#rMenu ul li:nth-child(2) {
	    background: url(../../assets/img/dele3.png) no-repeat 10px center;
	    padding-left: 35px;
	    cursor: pointer;
	}

	div.form-group.footer-btn{
		text-align: center;
	}

</style>

<template>
	<div class="index clearafter">
		<!-- 头部组件 -->
	    <header-component></header-component>
	    <div class="content flex">
		    <!-- 侧部导航组件 -->
		    <div class="w220">
		        <aside-component></aside-component>
		    </div>
			<!-- 右部内容区 -->
			<div class="w980 flex_full">
				<!-- 路径导航 -->
				<nav class="nav-path">
					<ol class="breadcrumb">
					  <!-- <li>基础数据</li> -->
					  <li>医生管理</li>
					</ol>
				</nav>
				<!-- 医生管理 -->
				<div class="fh-team-list" v-show="doctorManageTab">
					  <div class="form-group limitManage">
					    <!-- 社区机构列表 -->
					    <aside class="limit limit-hospital">
					    	<!-- 标题 -->
					    	<div class="limit-title">
					    		<span>医院列表</span>
					    	</div>
							 <div class="hospital-list">
		                        <div class="content_wrap">
		                            <div id="tree-con" class="ztree"></div>
		                        </div>
		                    </div>
					    </aside>
					    <!-- 医生列表 -->
					    <aside class="limit limit-hospital-detail">
					    	<div class="limit-title">
					    		<span>医生列表</span>
					    		<!-- <button data-toggle="modal" @click.stop.prevent="increaseDoctorEvent" style="display:none"> + 添加医生</button> -->
					    	</div>
					    	<!-- 查询搜索操作 -->
							<div class="list-opera">
								<form class="form-inline">
								  <div class="form-group">
								    <label for="exampleInputName2">医生姓名</label>
								    <input type="text" class="form-control" id="exampleInputName2" placeholder="请输入医生姓名" value="{{param.doctorName}}" v-model="param.doctorName" maxlength="15" />
								  </div>
								  <div class="form-group">
								    <label for="exampleInputEmail2">医生工号</label>
								    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入医生工号" value="{{param.localDoctorId}}" v-model="param.localDoctorId" maxlength="15" />
								  </div>
								  <div class="clear-research form-group">
								  	<button type="button" class="ok default" @click.stop.prevent="researchEvent">搜 索</button>
								  </div>
								</form>
							</div>
							<div class="hp-list-detail">
								<table class="table table-hover">
		 	                        <thead>
		 	                            <tr>
		 	                                <th class="col-md-2">医生姓名</th>
		 	                                <th class="col-md-3">电话</th>
		 	                                <th class="col-md-2">职称</th>
		 	                                <th class="col-md-2">所属科室</th>
		 	                                <th class="col-md-3">操作</th>
		 	                            </tr>
		 	                        </thead>
		 	                        <tbody>
		 	                            <tr v-for="item in serverData">
		 	                                <td>{{item.name}}</td>
		 	                                <td>{{item.phoneNo}}</td>
		 	                                <td>{{item.doctorLevelText ? item.doctorLevelText : '未填写'}}</td>
		 	                                <td>{{item.deptIdText}}</td>
		 	                                <td class="col-lg-2">
		 	                                	<span class="glyphicon" @click="watchDoctorMsgEvent(item)">查看</span>
		 	                                	<span class="glyphicon" @click="deleteDoctorEvent(item)">删除</span>
		 	                                </td>
		 	                            </tr>
		 	                            <tr class="no-data" v-if="isData">
		 	                            	<td colspan="5">暂无查询记录</td>
		 	                            </tr>
		 	                        </tbody>
		 	                    </table>
		 	                    <bootpage-component v-ref:page :async="true" :lens="lenArr" :page-len="pageLen" :headersparam="headersparam" :param="param"></bootpage-component>
							</div>
					    </aside>
					  </div>
				</div>
				<!-- 添加医生 -->
				<div class="increase-doctors" v-show="increaseDoctorTab">
					<div class="form-msg">
						<form action="#" id="form_subAddDocData" class="form-horizontal" novalidate="novalidate">
				            <div class="form-group">
				                <label class="control-label col-md-3"><span class="exp-mark">*</span>医生姓名</label>
				                <div class="col-md-4">
				                    <input type="text" id= "doctorName_select" placeholder="医生姓名" class="form-control name" disabled="true" />
				                    <span class="error" v-if="valDocName">请选择一位医生</span>
				                </div>
				                <div id = "chooseDoctorMenu" class="col-md-2">
				                    <a id="select-doctor-btn" href="javascript:void(0)" @click="selectDoctor" v-if="selectFlag">选择医生</a>
				                    <a id="select-doctor-btn" href="javascript:void(0)" @click="watchDoctor" v-if="watchFlag">查看医生</a>
				                </div>
				                <div id = "editDoctorMenu" class="col-md-2" hidden="hidden">
				                    <a href='./doctorManageAddMsg.html?deptId={{subAddDocData.deptId}}&doctorId={{subAddDocData.doctorId}}&type=edit' class="btn btn-success">查看医生</a>
				                </div>
				            </div>
				            <!-- <span class="start">*</span> -->
				            <div class="form-group">
				                <label class="control-label col-md-3"><span class="exp-mark">*</span>员工代码</label>
				                <div class="col-md-4">
				                    <input type="text" id="localDoctorId" name="localDoctorId" placeholder="员工代码" class="form-control" v-model="subAddDocData.localDoctorId" @blur="valEvent" :disabled="watchTag">
				                    <span class="error" v-if="valDocCode">员工代码需为数字或字母</span>
				                </div>
				            </div>
				            <div class="form-group" v-if="watchTag">
				                <label class="control-label col-md-3"><span class="exp-mark">*</span>机构名称</label>
				                <div class="col-md-4">
				                    <input type="text" id="orgName" name="orgName" placeholder="机构名称" class="form-control" value="{{watchOrgName}}" disabled />
				                </div>
				            </div>
				            <div class="form-group" v-if="watchTag">
				                <label class="control-label col-md-3"><span class="exp-mark">*</span>科室名称</label>
				                <div class="col-md-4">
				                    <input type="text" id="deptName" name="deptName" placeholder="科室名称" class="form-control" value="{{watchDeptName}}" disabled />
				                </div>
				            </div>
				            <div class="form-group">
				                <label class="control-label col-md-3">专家标识(医生)</label>
				                <div class="col-md-4">
				                    <select class="form-control valid" id = "expertFlag" name="expertFlag" aria-invalid="false" v-model="subAddDocData.expertFlag">
				                        <option value="1">是</option>
				                        <option value="0">否</option>
				                    </select>
				                </div>
				            </div>
				            <div class="form-group">
				                <label class="control-label col-md-3">专家费用(医生)</label>
				                <div class="col-md-4">
				                    <input type="text" id="expertFee" name="expertFee" placeholder="专家费用" class="form-control" v-model="subAddDocData.expertFee" @blur="valEvent">
				                    <span class="error" v-if="valDocFree">费用格式不正确(最多2位小数)</span>
				                </div>
				            </div>
				            <div class="form-group">
				                <label class="control-label col-md-3">主执业标识</label>
				                <div class="col-md-4">
				                    <select class="form-control" id = "mainFlag" name="mainFlag" v-model="subAddDocData.mainFlag">
				                        <option value="1">是</option>
				                        <option value="0">否</option>
				                    </select>
				                </div>
				            </div>
				            <div class="form-actions save-return-margin">
					            <div class="form-group save-btn-parent">
                                    <button type="button" class="btn btn-default save-btn" @click="saveAddDoctorMsgEvent">保 存</button>
                                    <button type="button" class="btn btn-default cancel-btn" @click="backToMainEvent">返 回</button>
                                </div>
				            </div>
				    	</form>
					</div>
				</div>
				<div class="modal fade" id="search-doc-cover" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			          <div class="modal-dialog" style="width:750px">
			              <div class="modal-content ">
							<div class="modal-header">
							    <div class="list-tips breadcrumb">
									<span class="default-span">医生信息-查询</span>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
								</div>
							</div>

			                  <div class="text-center" style="display:flex;display: -webkit-flex;margin:20px 0; align-items:center">
			                      <span style="padding:0 5px 0 25px">身份证号</span>
			                      <input class="form-control" style="width:200px" type="text" id="text1" v-model="searchDocByIdName.idCard" placeholder="请输入身份证号码">
			                      <span style="padding:0 5px">医生姓名</span>
			                      <input class="form-control" style="width:200px" type="text" id="text2" v-model="searchDocByIdName.name" placeholder="请输入姓名">
			                      <button class="btn search_newadd ok" style="margin:0 3px" id="refer" type="button" @click.stop.prevent="searchDoctorListTest">查询
			                      </button>
			                      <button type="button" class="btn search_newadd ok" @click="newAddDoctorEvent">新增医生</button>
			                  </div>

			                    <div style="height:400px;overflow-y: auto">
			                  <table class="table table-bordered" style="width:95%; margin:0 auto">
			                      <thead>
			                      <tr>
			                          <th>医生姓名</th>
			                          <th>身份证号</th>
			                          <th>性别</th>
			                          <th>操作</th>
			                      </tr>
			                      </thead>
			                      <tbody>
			                      <tr v-for="($index,lis) in searchDoctorData | filterBy searchDocByIdName.name">
			                            <td>{{lis.name}}</td>
			                            <td>{{lis.idCard}}</td>
			                            <td>{{lis.sexText}}</td>
			                            <td>
			                            	<a href="#" class="btn btn-info select" @click.stop.prevent="chooseDoctor(lis)">选择</a>
			                            </td>
			                        </tr>
			                        <tr class="no-data" v-if="isData">
			 	                        <td colspan="4">暂无相关医生记录,请先添加医生</td>
			 	                    </tr>
			                      </tbody>

			                  </table>
			                    </div>
			              </div>
			          </div>
			    </div>
				<!-- 新增医生 -->
				<div class="new-add-doctor" v-show="newAddDoctorTab">
			      	<!-- 添加医生基本表单信息 -->
	      			<form id="addDocotrForm" class="form-inline add-team-base" novalidate="novalidate">
	      			    <div class="form-group">
      				  	  <label for="exampleInputName2"><span class="exp-mark">*</span>医生姓名:</label>
      				  	  <input type="text" name="doctorName" v-model="addDocotrForm.doctorName" class="form-control add-server-packs-name" placeholder="请输入医生姓名" maxlength="15" required @blur="validationForm" />
      				  	  <span class="error" v-if="docName_val">请填写医生姓名</span>
      			  		</div>
      			  		<div class="form-group">
      			  	     <label for="exampleInputName2">身份证号码:</label>
      			  	     <input type="text" name="idCard" v-model="addDocotrForm.idCard" class="form-control" id="exampleInputName2" placeholder="请输入身份证号码" maxlength="18"  @blur="validationForm" />
      			  	     <span class="error" v-if="docIdCard_val">身份证格式不正确</span>
      			  		</div>
      			  		<div class="form-group">
      				  	  <label for="exampleInputName2">性别:</label>
      				  	  <select name="sex" id="leader-man" class="form-control roles-type add-server-packs-name" v-model="addDocotrForm.sex">
				            <option v-for="item in dictionary.sex" value="{{item.key}}">{{item.text}}</option>
				          </select>
      			  		</div>
      			  		<div class="form-group">
						   <label for="exampleInputName2" class="img-title">图片地址:</label>
						   <div class="img-component">
						   	   <imgid-btn></imgid-btn>
						   	   <span class="suggsetion-exp">建议尺寸300×300</span>
						   </div>
						 </div>
      			  		<div class="form-group">
						   <label for="exampleInputName2">出生日期:</label>
						   <input type="text" name="dob" class="form-control date-control" id="birthday" value="{{param.dob}}" v-model="addDocotrForm.dob" placeholder="请选择出生日期" />
						 </div>
						 <div class="form-group">
      				  	  <label for="exampleInputName2">国籍:</label>
      				  	  <select name = "nationality" id="leader-man" class="form-control roles-type add-server-packs-name" v-model="addDocotrForm.nationality">
				            <option v-for="item in dictionary.nationality" value="{{item.key}}">{{item.text}}</option>
				          </select>
      			  		</div>
      			  		<div class="form-group">
      				  	  <label for="exampleInputName2">民族:</label>
      				  	  <select name = "nation" id="leader-man" class="form-control roles-type add-server-packs-name" v-model="addDocotrForm.nation">
				            <option v-for="item in dictionary.nation" value="{{item.key}}">{{item.text}}</option>
				          </select>
      			  		</div>
      			  		<div class="form-group">
      				  	  <label for="exampleInputName2"><span class="exp-mark">*</span>电话号码:</label>
      				  	  <input type="text" name="phoneNo" v-model="addDocotrForm.phoneNo" class="form-control add-server-packs-name" placeholder="请输入联系电话" required @blur="validationForm" />
      				  	  <span class="error" v-if="docTel_val">请正确填写电话号码</span>
      			  		</div>
      			  		<div class="form-group">
      				  	  <label for="exampleInputName2">Email:</label>
      				  	  <input type="text" name="email" value="{{addDocotrForm.email}}" v-model="addDocotrForm.email" class="form-control add-server-packs-name" placeholder="请输入联系邮箱" @blur="validationForm" />
      				  	  <span class="error" v-if="docEma_val">邮箱格式不正确</span>
      			  		</div>
      			  		<div class="form-group">
      				  	  <label for="exampleInputName2">学历:</label>
      				  	  <select name = "academic" id="leader-man" class="form-control roles-type add-server-packs-name" v-model="addDocotrForm.academic">
				            <option v-for="item in dictionary.academic" value="{{item.key}}">{{item.text}}</option>
				          </select>
      			  		</div>
      			  		<div class="form-group">
      				  	  <label for="exampleInputName2">医生级别:</label>
      				  	  <select name = "doctorLevel" id="leader-man" class="form-control roles-type add-server-packs-name" v-model="addDocotrForm.doctorLevel">
				            <option v-for="item in dictionary.doctorLevel" value="{{item.key}}">{{item.text}}</option>
				          </select>
      			  		</div>
      			  		<div class="form-group">
      				  	  <label for="exampleInputName2">执业类别:</label>
      				  	  <select name = "certifiy" id="leader-man" class="form-control roles-type add-server-packs-name" v-model="addDocotrForm.certifiy">
				           <option v-for="item in dictionary.certifiy" value="{{item.key}}">{{item.text}}</option>
				          </select>
      			  		</div>
      			  		<div class="form-group">
      				  	  <label for="exampleInputName2"><span class="exp-mark">*</span>执业证书编号:</label>
      				  	  <input type="text" name="certifiyNo" v-model="addDocotrForm.certifiyNo" class="form-control add-server-packs-name" placeholder="请输入执业证书编号" required @blur="validationForm" />
      				  	  <span class="error" v-if="docNum_val">执业证书编号只能为数字或字母</span>
      			  		</div>
      			  		<div class="form-group">
      				  	  <label for="exampleInputName2">执业地点:</label>
      				  	  <input type="text" name="certifiyAddress" v-model="addDocotrForm.certifiyAddress" class="form-control add-server-packs-name" placeholder="请输入执业地点" />
      			  		</div>
      			  		<div class="form-group">
      				  	  <label for="exampleInputName2">执业范围:</label>
      				  	  <input type="text" name="certifiyScope" v-model="addDocotrForm.certifiyScope" class="form-control add-server-packs-name" placeholder="请输入执业范围"/>
      			  		</div>
      			  		<div class="form-group">
      				  	  <label for="exampleInputName2">发证机构:</label>
      				  	  <input type="text" name="checkOrg" v-model="addDocotrForm.checkOrg" class="form-control add-server-packs-name" placeholder="请输入发证机构" />
      			  		</div>
						 <div class="form-group">
      			  	       <label for="exampleInputName2">医生介绍:</label>
      			  	       <textarea name="introduce" v-model="addDocotrForm.introduce" class="form-control sim-explain-textarea" placeholder="请输入医生介绍" maxlength="50"></textarea>
      			  		</div>
      			  		<div class="form-group">
      			  	       <label for="exampleInputName2">医生专长:</label>
      			  	       <textarea name="speciality" v-model="addDocotrForm.speciality" class="form-control sim-explain-textarea" placeholder="请输入医生专长" maxlength="50"></textarea>
      			  		</div>
      			  		<div class="form-group">
      			  	       <label for="exampleInputName2">擅长疾病名称:</label>
      			  	       <textarea name="diseaseName" v-model="addDocotrForm.diseaseName" class="form-control sim-explain-textarea" placeholder="请输入擅长疾病名称" maxlength="50"></textarea>
      			  		</div>
      			  		 <div class="form-group save-btn-parent">
                            <button type="button" class="btn btn-default save-btn" @click="newAddSaveEvent">保 存</button>
                            <button type="button" class="btn btn-default cancel-btn" @click="newAddCancelEvent">返 回</button>
                        </div>
      			  	</form>
				</div>
			</div><!-- 内容区 -->
		</div>
		<div id="rMenu">
            <ul>
                <li id="m_add" @click="increaseDoctorEvent();">添加医生</li>
                <!-- <li id="m_del" @click="removeTreeNode();">删除</li> -->
            </ul>
        </div>

		<!-- 删除提示 -->
		<div id="delCoverTips" class="modal fade" tabindex="-1" role="dialog">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">删除</h4>
		      </div>
		      <div class="modal-body">
		        <p class="del-tips">您确定要删除<span v-text="delTeamName"></span>医生吗？</p>
		      </div>
		      <div class="modal-footer">
		        <div class="form-group footer-btn">
		        	<button type="button" class="save-btn" @click="confirmDelDoctor">确认</button>
		        	<button type="button" class="cancel-btn" data-dismiss="modal">取消</button>
		        </div>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
	</div>
</template>

<script>
	import 'assets/reset.css';
	import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css';
	import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js';

	//laydate
	import 'assets/lib/laydate/need/laydate.css';
	import 'assets/lib/laydate/skins/qianhuang/laydate.css';
	import 'assets/lib/laydate/laydate3.js';

	//ztree
	import 'assets/lib/zTree/img/metro.gif';
	import 'assets/lib/zTree/img/metro.png';
	import 'assets/lib/zTree/img/line_conn.png';

	import 'assets/lib/zTree/metroStyle.css';
	import 'assets/lib/zTree/js/jquery.ztree.core.js';
	import 'assets/lib/zTree/js/jquery.ztree.excheck.min.js';
	import 'assets/lib/zTree/js/jquery.ztree.exhide.min.js';

	import Header from 'components/module-head.vue';
	import Asider from 'components/menu-list.vue';
	import footerPage from 'components/BootPage.vue';
	import ImgUploadBtn from 'components/ImgUploadBtn.vue';
	import Public from 'assets/public.js';

	export default {
		data () {
			return {
				headersparam: {
		            'X-Service-Id': 'base.sysDoctorService',
		            'X-Service-Method': 'getDoctorsInfo'
		        },
		        param: {
		            nodeType: "",
			        nodeId: "",//nodeType为orgId则传org,否则传deptId
			        doctorName: "",//医生姓名
			        localDoctorId: "",//医生工号
			        pageNo: 1,
			        pageSize: 10
		        },

		        //Tab切换
		        doctorManageTab: true,
				increaseDoctorTab: false,
				newAddDoctorTab: false,

				searchDoctorData:{},

				//字典查询数据
				dictionary: {
					sex:{},//性别,字典base_sex
					nation:{},//民族base_nation
					academic:{},//学历base_education
					nationality:{},//国籍base_nationality
					doctorLevel:{},//医生级别base_doctorTitle
					certifiy:{}//执业类别base_practiceCategory
				},

				//添加医生
                subAddDocData:{//
                	orgId: "",
			        deptId: "",
			        doctorId: "",
			        localDeptId: "",
			        localDoctorId: "",
			        expertFlag: "0",
			        expertFee: 0,
			        mainFlag: "1",
			        id: 0//新增为0
                },
                //新增医生（医生详细数据）
                addDocotrForm: {
			        diseaseName: "",//疾病名称,各种疾病用都号分隔
			        doctorId: "",//新增的时候为空
			        idCard: "",// 身份证
			        sex: "1",//性别,字典base_sex
			        speciality: "",//医生专长
			        introduce: "",//医生介绍
			        certifiyAddress: "",//执业地点
			        nation: "01",//民族base_nation
			        academic: "10",//学历base_education
			        phoneNo: "",//联系号码
			        certifiyNo: "",//执业证编码
			        checkOrg: "",//发证机构
			        nationality: "01",//国籍base_nationality
			        doctorLevel: "231",//医生级别base_doctorTitle
			        email: "",
			        certifiy: "01",//执业类别base_practiceCategory
			        dob: "",//出生日期
			        doctorName: "",//医生姓名
			        avatarFileId: 2,//医生照片Id
			        certifiyScope: ""//执业范围
                },
                //新增医生表单验证
                docName_val: false,
				docTel_val: false,
				docEma_val: false,
				docNum_val: false,
				docIdCard_val: false,

                //身份证、姓名查询医生列表
                searchDocByIdName: {
                	idcard: "",
        	        name: "",//doctorName
        	        pageNo: 1,
        	        pageSize: 10000
                },

                //右击事件缓存数据
                rightClickCache: {},

                //分页组件传回数据
                serverData:{},

                //社区机构列表数据（分页传递）
                orgListData: {},

	            deleteDoctorId:"",
                deleteDeptId: '',
                deleteOrgId: '',

                //获取科室id
                getDeptId: '',

                //验证信息完善度
                valDocName: false,
				valDocCode: false,
				valDocFree: false,

				//查看医生信息标识
				watchTag: false,
				watchOrgName: '',
				watchDeptName: '',
				//缓存doctotId信息
				cacheDoctorId: '',

				//选择--查看医生标识
				selectFlag: false,
				watchFlag: false,

                //被删除--医生数据--名字
                deleteDoc: '',
                delTeamName: '',

                //是否有记录
                isData: false
			}
		},
		events: {
			'data': function(datas){
				this.serverData = datas;
			}
		},
		watch: {
			'serverData': 'isWatchServerData'
		},
		ready() {
			this.ztreeEvent();
			this.dictionaryRequest();
			this.initLaydate();
		},
		components: {
			//头部组件
			'header-component': Header,
			//侧部导航组件
			'aside-component': Asider,
			'bootpage-component': footerPage,
			'imgid-btn': ImgUploadBtn
		},
		methods: {
			//医院列表文件树
            ztreeEvent () {
                var that = this;
                var setting = {
                    async: {
                        enable: true,
                        type: "post",
                        url: Public.MENU_URL(),
                        dataType: "JSON",
                        headers: {
                            "X-Access-Token": sessionStorage.getItem('accessToken'),
                            "X-Service-Id": "base.sysDepartmentService",
                            "X-Service-Method": 'queryDeptList',
                            "Content-Type": "application/json"
                        },
                        autoParam:["id", "nodeType=nodeType","level"],
                        dataFilter: ajaxDataFilter
                    },
                    callback: {
                        // beforeDrag: beforeDrag,
                        // beforeRemove: beforeRemove,
                        // onRemove: zTreeOnRemove,
                        onRightClick: OnRightClick,
                        onClick: zTreeOnClick
                    }
                };
                //赋值
                function ajaxDataFilter(treeId, parentNode, responseData) {
                	responseData=responseData.body;
                	$.each(responseData,function(index,el){
                		el.isParent=true;
                		el.nodeType="dept";
                	})
                    return responseData;
                };
                //左击
                function zTreeOnClick(event, treeId, treeNode) {
                	console.log(treeNode);
                    var zTree = $.fn.zTree.getZTreeObj("tree-con");
                    	that.getDeptId = treeNode.id;
                    //获取父元素parentid
                    let sNodes = zTree.getSelectedNodes();
                    let node = sNodes[0].getParentNode();
                    if(treeNode.nextNodeType == 'org'){
                    	that.rootName =  treeNode.name;
                    };
                    if (sNodes.length > 0 && node != null) {
                    	that.rootName = node.name;
                    	/*$.ajax({
                    		type: "post",
                    		url: Public.MENU_URL(),
                    		dataType: "JSON",
                    		headers: {
                    		    "X-Access-Token": sessionStorage.getItem('accessToken'),
                    		    "X-Service-Id": "base.sysDepartmentService",
                    		    "X-Service-Method": 'getDept',
                    		    "Content-Type": "application/json"
                    		},
                    		data:'["'+treeNode.id+'"]',
                    		success: function(ressult){
                    			 that.deptDetailData = ressult.body
                    		}
                    	});*/
                    };
                    //向分页组件赋值机构id
                    if(treeNode.nextNodeType == 'org'){
                    	that.param.nodeType = 'org';
                    }else{
                    	that.param.nodeType = 'dept';
                    };
                    that.param.nodeType = treeNode.nextNodeType;
                    that.param.nodeId = treeNode.id;
                    //清空查询条件
     				that.param.doctorName = '';
					that.param.localDoctorId = '';
                    that.researchEvent();
                }
                //右击
                function OnRightClick(event, treeId, treeNode) {
                	var treeObj2 = $.fn.zTree.getZTreeObj("tree-con");console.log(treeNode)
                		that.rootName =  treeNode.name;
                		that.prevDept = '无';
                		that.cacheTreeNode = treeNode;
                		that.getDeptId = treeNode.id;
                		$.ajax({
                    		type: "post",
                    		url: Public.MENU_URL(),
                    		dataType: "JSON",
                    		headers: {
                    		    "X-Access-Token": sessionStorage.getItem('accessToken'),
                    		    "X-Service-Id": "base.sysDepartmentService",
                    		    "X-Service-Method": 'getDept',
                    		    "Content-Type": "application/json"
                    		},
                    		data:'["'+treeNode.id+'"]',
                    		success: function(ressult){
                    			that.rightClickCache = ressult.body;
                    		}
                    	});
                	//不能为机构直接添加医生
                	if(treeNode.nextNodeType == 'org'){
                		Public.ajaxPrompt('请选择科室进行添加医生!');
						return false;
                	};
                	//通过parenTid获取数据
                	let nodeRoot = treeObj2.getNodeByTId(treeNode.parentTId);
                	if(treeNode.nextNodeType == 'dept'){
            			that.prevDept = treeNode.name;
						that.rootName =  nodeRoot.name;
            			that.cacheDeptId = treeNode.id;
            			//添加医生--赋值orgId和deptId
            			that.subAddDocData.orgId = that.rightClickCache.orgId;
            			that.subAddDocData.deptId = that.rightClickCache.deptId;
                    }
	                if (treeNode.level == 0) {
	                    that.showRMenu("root", event.clientX, event.clientY);
	                } else if (treeNode.nodeType == this.nodeleid) {
	                    treeObj2.cancelSelectedNode();
	                }else {
	                    that.showRMenu("node", event.clientX, event.clientY);
	                }
	                treeObj2.selectNode(treeNode);
	            }
                //删除节点前操作
                function beforeRemove(treeId, treeNode) {
                	$('#delCoverTips').modal('show');
                	that.deleteDepName = treeNode.text;
                	// operaDel(treeId, treeNode);
                	return false;
                }

                function removeHoverDom(treeId, treeNode) {
                    $("#addBtn_" + treeNode.tId).unbind().remove();
                };

                $(document).ready(function() {
                    $.fn.zTree.init($("#tree-con"), setting);
                });
            },


            //右键菜单部分
            showRMenu (type, x, y) {
                $("#rMenu ul").show();
                if (type == "root") {
                    $("#m_del").hide();
                    $("#m_add").show();
                } else if (type == "noadd") {
                    $("#m_del").show();
                    $("#m_add").hide();

                } else {
                    $("#m_del").show();
                    $("#m_add").show();

                }
                $("#rMenu").css({
                    "top": y + "px",
                    "left": x + "px",
                    "visibility": "visible"
                });

                $("body").bind("mousedown", this.onBodyMouseDown);
            },

            hideRMenu () {
                $("#rMenu").css({
                    "visibility": "hidden"
                })
                $("body").unbind("mousedown", this.onBodyMouseDown);
            },

            onBodyMouseDown (event) {
                if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
                    $("#rMenu").css({
                        "visibility": "hidden"
                    });
                }
            },


			//监听数据变化显示是否有记录
			isWatchServerData () {
				if(this.serverData == '' || this.serverData == null || this.serverData == 'undefined'){
					this.isData = true;
					return;
				}
				if(this.serverData.length == '' || this.serverData.length == null || this.serverData.length == 'undefined'){
					this.isData = true;
				}else{
					this.isData = false;
				};
			},


			//初始化日期插件
			initLaydate () {
				laydate({
		            elem: '#birthday',
		            istime: true,
		            format: 'YYYY-MM-DD',
		            event: 'focus',
		            festival: true,
		            istoday: false
		        });
			},


			//字典请求
			dictionaryRequest () {
				var that = this;
				var arr = ["base.dictionary.base_sex","base.dictionary.base_nation","base.dictionary.base_education","base.dictionary.base_nationality","base.dictionary.base_doctorTitle","base.dictionary.base_practiceCategory"];
				$.when(Public.commonajax('coms.multipleDictionaryService','findDic','['+JSON.stringify(arr)+']')).done(function(res){
					$.each(res.body,function(index,ele){
						if(ele.dicId == arr[0]){
							that.dictionary.sex = ele.items;
						}
						if(ele.dicId == arr[1]){
							that.dictionary.nation = ele.items;
						}
						if(ele.dicId == arr[2]){
							that.dictionary.academic = ele.items;
						}
						if(ele.dicId == arr[3]){
							that.dictionary.nationality = ele.items;
						}
						if(ele.dicId == arr[4]){
							that.dictionary.doctorLevel = ele.items;
						}
						if(ele.dicId == arr[5]){
							that.dictionary.certifiy = ele.items;
						}
					});
				});
			},

			//搜索
			researchEvent () {
				this.$refs.page.refresh();
			},

			//添加医生
			increaseDoctorEvent () {
				this.doctorManageTab = false;
				this.increaseDoctorTab = true;
				this.newAddDoctorTab = false;
				this.hideRMenu();
				this.clearDocCertMsg();
				this.watchTag = false;
				//查看选择标识
				this.selectFlag = true;
				this.watchFlag = false;
				//default hide validation
				this.valDocName = false;
				this.valDocCode = false;
				this.valDocFree = false;
				//添加医生--赋值orgId和deptId
    			this.subAddDocData.orgId = this.rightClickCache.orgId;
    			this.subAddDocData.deptId = this.rightClickCache.deptId;
			},

			//返回医生管理主界面
			backToMainEvent () {
				this.doctorManageTab = true;
				this.increaseDoctorTab = false;
				this.newAddDoctorTab = false;
			},

			//保存添加的医生信息(保存医生执业信息)
			saveAddDoctorMsgEvent () {
				var that = this;
				if($('#doctorName_select').val() == ''){
					this.valDocName = true;
					return false;
				}else{this.valDocName = false};
				if(this.valEvent() != true){return false};
				this.subAddDocData.localDeptId = this.rightClickCache.localDeptId;
				this.subAddDocData.expertFee = this.subAddDocData.expertFee*1;
    			//console.log(this.subAddDocData)
				//数据提交
				$.when(Public.commonajax('base.sysDoctorService','saveDoctorOrgs','['+JSON.stringify(this.subAddDocData)+']')).done(function(res){
					if(res.code == 200){
						Public.ajaxPrompt('添加成功!');
						that.clearDocCertMsg();
						that.newAddDoctorTab = false;
						that.increaseDoctorTab = false;
						that.doctorManageTab = true;
						that.$refs.page.refresh();
					}else{
						let msg = res.msg.length > 30 ? '提交失败!' : res.msg;
						Public.ajaxPrompt(msg);
					};
	            });
			},

			//清空--医生执业信息
			clearDocCertMsg () {
				$('#doctorName_select').val('');
				this.subAddDocData.doctorId = '';
				this.subAddDocData.localDeptId = '';
				this.subAddDocData.localDoctorId = '';
				this.subAddDocData.expertFlag = '0';
				this.subAddDocData.expertFee = 0;
				this.subAddDocData.mainFlag = '1';
				this.subAddDocData.id = '0';
			},

			//通过身份证、姓名查询医生列表
			searchDoctorListTest () {
				var that = this;
				that.isData = false;
				// if(this.searchDocByIdName.idcard == '' || this.searchDocByIdName.name == ''){
				// 	Public.ajaxPrompt('请输入查询条件!');
				// 	return false;
				// };
				$.when(Public.commonajax('base.sysDoctorService','getDoctorsInfoOfMaintain','['+JSON.stringify(this.searchDocByIdName)+']')).done(function(res){
					that.searchDoctorData = res.body.list;
					if(that.searchDoctorData.length < 1){
						that.isData = true;
					}else{that.isData = false};
	            });
			},
			//选择所查询的医生
			chooseDoctor (lis) {
				this.subAddDocData.doctorId = lis.doctorId;
				this.valDocName = false;
				$('#doctorName_select').val(lis.name);
				$('#search-doc-cover').modal('hide');
			},


			//新增医生
			newAddDoctorEvent () {
				this.doctorManageTab = false;
				this.increaseDoctorTab = false;
				this.newAddDoctorTab = true;
				this.clearNewAddDocEvent();
				$('#search-doc-cover').modal('hide');
			},

			//保存--新增医生
			newAddSaveEvent () {
				var that = this;
				var tagNew = this.validationForm();
				if(tagNew == false){return false};
				$.when(Public.commonajax('base.sysDoctorService','saveDoctorInfo','['+JSON.stringify(this.addDocotrForm)+']')).done(function(res){
					if(res.code == 200){
						Public.ajaxPrompt('提交成功!');
						that.newAddDoctorTab = false;
						that.doctorManageTab = false;
						that.increaseDoctorTab = true;
						$('#search-doc-cover').modal('show');
						//that.newAddCancelEvent();
					}else{
						let msg = res.msg.length > 30 ? '提交失败!' : res.msg;
						Public.ajaxPrompt(msg);
					}
				});
			},

			//取消--新增医生
			newAddCancelEvent () {
				if(this.watchFlag !=true){
					this.newAddDoctorTab = false;
					this.doctorManageTab = false;
					this.increaseDoctorTab = true;
					$('#search-doc-cover').modal('show');
				}else{
					this.newAddDoctorTab = false;
					this.doctorManageTab = false;
					this.increaseDoctorTab = true;
				};

			},


			//查看医生执业信息
			watchDoctorMsgEvent (item) {
				this.doctorManageTab = false;
				this.newAddDoctorTab = false;
				this.increaseDoctorTab = true;
				this.watchTag = true;
				//查看选择标识
				this.selectFlag = false;
				this.watchFlag = true;
				this.valDocName = false;
				var that = this;
				$.when(Public.commonajax('base.sysDoctorService','getDoctorOrgDetail','["'+item.doctorId+'"]')).done(function(res){
					if(res.code == 200){
						$('#doctorName_select').val(item.name);
						$.each(res.body,function(index,ele){
							if(item.orgId == ele.orgId){
								if(item.deptId == ele.deptId){
									that.subAddDocData.localDeptId = ele.localDeptId;
									that.subAddDocData.localDoctorId = ele.localDoctorId;
									that.subAddDocData.expertFlag = ele.expertFlag;
									that.subAddDocData.expertFee = ele.expertFee;
									that.subAddDocData.mainFlag = ele.mainFlag;
									that.subAddDocData.id = ele.id;
									that.subAddDocData.orgId = item.orgId;
									that.subAddDocData.deptId = item.deptId;
									//机构名称、科室名称
									that.watchOrgName = ele.orgname;
									that.watchDeptName = ele.depname;
									that.subAddDocData.doctorId = item.doctorId;
								}
							}
						});
					};
				});

				//this.cacheDoctorId = item.doctorId;
			},

			//清空--新增医生
			clearNewAddDocEvent () {
				this.addDocotrForm.diseaseName = '';
				this.addDocotrForm.doctorId = '';
				this.addDocotrForm.idCard = '';
				this.addDocotrForm.sex = '1';
				this.addDocotrForm.speciality = '';
				this.addDocotrForm.introduce = '';
				this.addDocotrForm.certifiyAddress = '';
				this.addDocotrForm.nation = '01';
				this.addDocotrForm.academic = '10';
				this.addDocotrForm.phoneNo = '';
				this.addDocotrForm.certifiyNo = '';
				this.addDocotrForm.checkOrg = '';
				this.addDocotrForm.nationality = '01';
				this.addDocotrForm.doctorLevel = '231';
				this.addDocotrForm.email = '';
				this.addDocotrForm.certifiy = '01';
				this.addDocotrForm.dob = '';
				this.addDocotrForm.doctorName = '';
				this.addDocotrForm.avatarFileId = 0;
				this.addDocotrForm.certifiyScope = '';
			},


			//选择医生
			selectDoctor () {
				this.searchDocByIdName.name = '';
				this.searchDocByIdName.idCard = '';
				$('#search-doc-cover').modal('show');
			},

			//查看医生
			watchDoctor () {
				var that = this;
				this.increaseDoctorTab = false;
				this.newAddDoctorTab = true;
				let doctorId = this.subAddDocData.doctorId;
				$.when(Public.commonajax('base.sysDoctorService','getDoctor','["'+doctorId+'"]')).done(function(res){
					if(res.code == 200){
						that.addDocotrForm = res.body;
					}
				});
			},


			//删除医生
			deleteDoctorEvent (item) {
				this.delTeamName = item.name;
				//this.cacheDoctorId = item.doctorId;
				//提交删除数据
                this.deleteDoc = `'${item.orgId}','${item.deptId}','${item.doctorId}'`;
				$('#delCoverTips').modal('show');
			},

			//确定删除医生
			confirmDelDoctor () {
				var that = this;
				$('#delCoverTips').modal('hide');
				$.when(Public.commonajax('base.sysDoctorService','deleteOrgDoctor','['+this.deleteDoc+']')).done(function(res){
					if(res.code == 200){
						Public.ajaxPrompt('删除成功!');
						that.researchEvent();
					}else{
						Public.ajaxPrompt(res.msg);
					};
				});
			},


	   		//表单--失去焦点
			valEvent () {
				var codes = /^[0-9a-zA-Z]+$/;
				var frees = /^\d+(\.\d{0,2})?$/;
				var fag = true;
				if(this.subAddDocData.expertFee != ''){
					if(frees.test(this.subAddDocData.expertFee) != true){
						this.valDocFree = true;fag = false;
					}else{this.valDocFree = false};
				};
				if(codes.test(this.subAddDocData.localDoctorId) != true){
					this.valDocCode = true;fag = false;
				}else{this.valDocCode = false};
				return fag;
			},

			//表单验证
			validationForm () {
				var result = true;
				let name = this.addDocotrForm.doctorName;
				let tel  = this.addDocotrForm.phoneNo;
				let number = this.addDocotrForm.certifiyNo;
				let email  = this.addDocotrForm.email;
				let idCard = this.addDocotrForm.idCard;

				let reg_idCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				let reg_telNum = /^[1][1,2,3,4,5,6,7,8,9][0-9]{9}$/;
				var reg_email  = /^[A-Za-z0-9]+([-_.][A-Za-z0-9]+)*@([A-Za-z0-9]+[-.])+[A-Za-z0-9]{2,5}$/;
				//姓名
				if(name == ''){
					this.docName_val = true;
					result = false;
				}else{this.docName_val = false};
				//电话号码
				if(reg_telNum.test(tel) == false){
					this.docTel_val = true;
					result = false;
				}else{this.docTel_val = false};
				//执业编号
				if(/^[0-9a-zA-Z]+$/.test(number) != true){
					this.docNum_val = true;
					result = false;
				}else{this.docNum_val = false};
				//邮箱
				if(email != ''){
					if(reg_email.test(email) == false){
						this.docEma_val = true;
						result = false;
					}else{this.docEma_val = false};
				}else{this.docEma_val = false};
				//身份证
				if(idCard != ''){
					if(reg_idCard.test(idCard) == false){
						this.docIdCard_val = true;
						result = false;
					}else{//522121 19931111 1616
						//识别性别、生日
						//this.addDocotrForm.sex = aaa;
						//this.addDocotrForm.dob = aaa;
						const bir_y = idCard.substr(6,4);
						const bir_m = idCard.substr(10,2);
						const bir_d = idCard.substr(12,2);
						this.addDocotrForm.dob = bir_y+'-'+bir_m+'-'+bir_d;
						let sex_v = idCard.substr(16,1);console.log(sex_v)
						sex_v = (sex_v % 2 == 0) ? '2' : '1';console.log(sex_v)
						this.addDocotrForm.sex = sex_v;
						this.docIdCard_val = false;
					};
				}else{this.docIdCard_val = false};
				return result;
			}
		}//methods
	}


</script>
